<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta itemprop="name" content="{$title}">
    <meta itemprop="description" content="{$share_introduction}">
    <meta itemprop="image" content="{$share_img}">
    {if $data.status == 0}
    <link href="{$oss}web/invitate_input_record/css/mui.min.css" rel="stylesheet"/>
    <link href="{$oss}web/invitate_input_record/css/mui.picker.min.css" rel="stylesheet"/>
    {/if}
    <link rel="stylesheet" href="/static/vip/css/common.css?v=2019.11.08">
    <link href="/static/invitate_input_record/css/invitate_input_record.css?v=12.03" rel="stylesheet"/>
    <style>
        .wrapper_content {
            margin-top: -8rem;
        }

        .common_bottom_con {
            padding-bottom: 8rem;
        }

        .common_bottom_con .first_con .des {
            color: #999999;
        }

        .common_bottom_con .btn_index {
            width: 20rem;
            height: 5rem;
            background: #ffffff;
            border-radius: 0.6rem;
            color: #FF6C89;
            line-height: 2.5rem;
            font-weight: 400;
            font-size: 1.8rem;
            margin: 2rem auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn_ok {
            border-radius: 0.8rem;
            color: #FF839C;
        }

        .global-location {
            width: 100%;
            max-width: 750px;
            height: 4rem;
            display: block;
            overflow: hidden;
            position: fixed;
            bottom: 0;
            z-index: 9;
            box-shadow: 0 -0.4rem 0.4rem 0 rgba(221, 221, 221, 0.5);
            background: #f3f3f3;
        }

        .global-location .logo {
            width: 3rem;
            height: 3rem;
            margin: 0.5rem 0.5rem 0.5rem 3rem;
            float: left;
        }

        .global-location .title {
            font-weight: bold;
            font-size: 1.1rem;
            color: #333333;
            display: flex;
            margin-top: 0.25rem;
        }

        .global-location .desc {
            font-weight: 400;
            font-size: 1.1rem;
            color: #999999;
            display: flex;
        }

        .global-location .location .loc-btn {
            position: absolute;
            top: 0;
            right: 0;
            height: 4rem;
            font-size: 1.4rem;
            line-height: 4rem;
            padding: 0 1.1rem;
            color: #f3f3f3;
            background: #FF6C89;
            overflow: hidden;
            box-sizing: border-box;
        }

        .global-location .close {
            position: absolute;
            top: 0.2rem;
            left: 0.2rem;
            width: 1.6rem;
            height: 1.6rem;
            display: block;
            background: #f3f3f3 url("/static/valentine/2021/img/叉.png") no-repeat;
            background-size: cover;
        }

        .fixed-button {
            position: absolute;
            top: 10rem;
            right: 0;
            z-index: 10;
        }

        .fixed-button .rules-btn {
            width: 6rem;
            height: 3.4rem;
            border: none;
            border-top-left-radius: 25%;
            border-bottom-left-radius: 25%;
            overflow: hidden;
            background: url("/static/valentine/2021/img/活动规则.png") no-repeat;
            background-size: cover;
            -webkit-tap-highlight-color: transparent;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .pop-box {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            display: none;
        }

        .pop-shadow {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10;
        }

        .rules {
            position: absolute;
            top: 4.45rem;
            left: 0;
            right: 0;
            z-index: 11;
        }

        .rules .box-title {
            width: 28.5rem;
            height: 6.7rem;
            margin: 0 auto;
            border-top-left-radius: 1.5rem;
            border-top-right-radius: 1.5rem;
            background: #FFC2C2 url("/static/valentine/2021/img/活动规则标题.png") no-repeat;
            background-size: cover;
        }

        .rules .box-content {
            background: #FFC2C2;
            width: 28.5rem;
            color: #ffffff;
            margin: 0 auto;
        }

        .rules .box-important {
            background: #FFC2C2;
            color: #ff6c89;
            font-size: 1rem;
            padding: 1.5rem 0 2.25rem;
            width: 28.5rem;
            margin: 0 auto;
            text-align: center;
            border-bottom-left-radius: 1.5rem;
            border-bottom-right-radius: 1.5rem;
        }

        .rules .box-content p {
            padding: 0 2rem 1rem;
            font-size: 1.1rem;
            line-height: 1.6rem;
            font-weight: normal;
            color: #ffffff;
        }

        .rules .box-close {
            width: 2.5rem;
            height: 2.5rem;
            margin: 1.5rem auto 0;
            background: url("/static/valentine/2021/img/close.png") no-repeat;
            background-size: cover;
            cursor: pointer;
        }


        /*结果部分*/
        .result_container {
            background: #fff;
            border-radius: 1.1rem;
            padding: 4.0rem 4.0rem 2.0rem 4.0rem;
            margin: 0 0.5rem;
        }

        /*结果顶部部分*/
        .result_top_con {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .result_top_con .img_left {
            height: 6.9rem;
            margin-right: 1rem;
        }

        .result_top_con .right_con .title {
            color: rgba(255, 133, 155, 1);
            font-size: 2.2rem;
            font-weight: 700;
            line-height: 3rem;
            height: 3rem;
        }

        .result_top_con .right_con .des {
            color: rgba(153, 153, 153, 1);
            height: 2rem;
            font-size: 1.4rem;
            line-height: 2rem;
        }

        /*查看合盘结果 文案 和 按钮 部分*/
        .result-tips {
            margin-top: 2.5rem;
        }

        .result-tips .tips-title {
            text-align: center;
            color: rgba(51, 51, 51, 1);
            font-size: 1.3rem;
            line-height: 1.3rem;
            padding: 1.5rem 0;
            font-weight: bold;
        }

        .result-tips .tips-btn {
            width: 20rem;
            height: 4.4rem;
            line-height: 4.4rem;
            display: block;
            margin: 0 auto;
            background: #FF6C89;
            color: #ffffff;
            border-radius: 0.8rem;
            font-size: 1.8rem;
            text-align: center;
        }
        body {
            background: #f4f4f4;
        }
    </style>
</head>
<body>
<div class="container">
    <!--顶部图片-->
    <img class="header_img" src="/static/valentine/2021/img/七夕头图邀请.jpg?v=111" style="{$data.status == 0 ?'':'display: none;'}">
    <div id="tab-2" class="wrapper_content">
        <!--输入内容部分-->
        {if $data.status == 0}
        <div class="content_container">
            <img class="user_img" onerror="onerror=null;src='/static/valentine/2021/img/默认头像.png'"
                 src="{$data.record.avatar}">
            <form action="##" onsubmit="return false" class="form" method="post" id="form">
                <div class="item_con">
                    <div class="title">昵称</div>
                    <div class="item_right_con">
                        <input class="input_con" type="text" id="name" name="name" value="{$data.record.name}" autocomplete="off">
                    </div>
                </div>
                <div class="item_con">
                    <div class="title">性别选择</div>
                    <div class="sex_con">
                        <div id="sex_male" class="sex {$data.record.sex ==1 ?'sex_selected':''}" onclick="actionSex(1)">男</div>
                        <div id="sex_female" class="sex sex_last {$data.record.sex ==2 ?'sex_selected':''}" onclick="actionSex(2)">女</div>
                    </div>
                </div>
                <div class="item_con">
                    <div class="title">出生时间</div>
                    <div class="item_right_con">
                        <input class="input_con" id="timeResult"
                               data-options="{&quot;value&quot;:&quot;{$data.record.year==''?'1995-01-01 00:00':$data.record.year.'-'.$data.record.month.'-'.$data.record.day.' '.$data.record.hour.':'.$data.record.minute}&quot;,&quot;beginYear&quot;:1900,&quot;endYear&quot;:2099}"
                               name="birth_time" placeholder="出生时间（公历）" type="text"
                               value="{$data.record.year==''?'':$data.record.year.'-'.$data.record.month.'-'.$data.record.day.' '.$data.record.hour.':'.$data.record.minute}"
                               readonly="true"
                               unselectable="on">
                        <div class="arrow"></div>
                    </div>
                </div>
                <div class="item_con">
                    <div class="title">出生地点</div>
                    <div class="item_right_con" id='showCityPickerBirth'>
                        <input class="input_con" id='cityResultBirth' type="text" name="birth_place" placeholder=""
                               value="{$data.record.birth_country==''?'':$data.record.birth_country.'-'.$data.record.birth_province.'-'.$data.record.birth_city}"
                               readonly="true"
                               unselectable="on">
                        <div class="arrow"></div>
                    </div>
                </div>

                <div class="item_con item_con_without_boder_bottom">
                    <div class="title">现居城市</div>
                    <div class="item_right_con" id='showCityPickerNow'>
                        <input class="input_con" id='cityResultNow' type="text" name="birth_place" placeholder=""
                               value="{$data.record.live_country==''?'':$data.record.live_country.'-'.$data.record.live_province.'-'.$data.record.live_city}"
                               readonly="true" unselectable="on">
                        <div class="arrow"></div>
                    </div>
                </div>
                <input style="display:none;" type="text" id="is_user_have_record" name="is_user_have_record"
                       value="{$data.is_user_have_record}">
                <input type="hidden" id="timestamp" name="timestamp" value="{$data.timestamp}">
                <input type="hidden" id="share_to" name="share_to" value="{$data.share_to}">
                <input type="hidden" id="unionid" name="unionid" value="{$data.unionid}">
                <input type="hidden" id="inviter_name" name="inviter_name" value="{$data.inviter_name}">
                <input type="hidden" id="avatar" name="avatar" value="{$data.record.avatar}">
                <input type="hidden" id="uid" name="uid" value="{$data.uid}">
                <input type="hidden" id="sex" name="sex" value="{$data.record.sex}">
                <input type="hidden" id="year" name="year" value="{$data.record.year}">
                <input type="hidden" id="month" name="month" value="{$data.record.month}">
                <input type="hidden" id="day" name="day" value="{$data.record.day}">
                <input type="hidden" id="hour" name="hour" value="{$data.record.hour}">
                <input type="hidden" id="minute" name="minute" value="{$data.record.minute}">
                <input type="hidden" id="birth_country" name="birth_country" value="{$data.record.birth_country}">
                <input type="hidden" id="birth_province" name="birth_province" value="{$data.record.birth_province}">
                <input type="hidden" id="birth_city" name="birth_city" value="{$data.record.birth_city}">
                <input type="hidden" id="live_country" name="live_country" value="{$data.record.live_country}">
                <input type="hidden" id="live_province" name="live_province" value="{$data.record.live_province}">
                <input type="hidden" id="live_city" name="live_city" value="{$data.record.live_city}">
                <input type="hidden" id="long_deg" name="long_deg" value="{$data.record.long_deg}">
                <input type="hidden" id="long_min" name="long_min" value="{$data.record.long_min}">
                <input type="hidden" id="ew" name="ew" value="{$data.record.ew}">
                <input type="hidden" id="lat_deg" name="lat_deg" value="{$data.record.lat_deg}">
                <input type="hidden" id="lat_min" name="lat_min" value="{$data.record.lat_min}">
                <input type="hidden" id="ns" name="ns" value="{$data.record.ns}">
            </form>
        </div>
        <div class="input_hint">您的个人信息会严格保密 仅作为合盘的依据</div>
        <div class="btn_ok" onclick="checkForm()">完成</div>
        {/if}
        <div class="result_container" style="display: none;">
            <div class="result_top_con">
                <img class="img_left" src="{$oss}web/invitate_input_record/images/result_ok.png">
                <div class="right_con">
                    <div class="title">{$data.status==1?'已填写！':'提交成功！'}</div>
                    <div class="des">{$data.status==1?'如填写有误请联系好友再次发送邀请':($data.inviter_name!=''?$data.inviter_name:'').'已收到你的信息'}</div>
                </div>
            </div>

            <div class="result-tips" {if time() < 1598107109}style="display:none;"{/if}>
                <div class="tips-title">-打开准了APP体验更多合盘玩法-</div>
                <!--使用share_id查看合盘结果-->
                <a class="tips-btn" id="show-result" href="{:url('get_with_score2021')}?share_id={$data.share_id??0}&token={$data.token??''}">查看合盘结果</a>
            </div>
        </div>
        <div class="result_con_self" style="display: none;">
            <div>邀请更多朋友</div>
            <div>就能获得更多合盘结果</div>
        </div>

        <div class="common_bottom_con" style="{$data.status == 0 ?'':'display: none;'}">
            <div class="first_con">
                <div class="line left"></div>
                <div class="des">来合盘赢七夕好礼</div>
                <div class="line right"></div>
            </div>
            <a class="btn_index" href="https://xingzuonvshen.datasink.sensorsdata.cn/t/z">{if $data.status == 3}登录App查看合盘结果{else}我也要挑战{/if}</a>
        </div>
    </div>
    <div class="global-location">
        <img src="https://oss.goddessxzns.com/picture/uploads/logo.png?x-oss-process=style/show" alt="logo" class="logo">
        <div class="title">准了APP</div>
        <div class="desc">前往“准了APP”查看更多星座知识</div>
        <a href="https://xingzuonvshen.datasink.sensorsdata.cn/t/z" class="location">
            <span class="loc-btn">打开APP</span>
            <span class="close"></span>
        </a>
    </div>

    <!--活动规则-->
    <div class="pop-box">
        <div class="pop-shadow"></div>
        <div class="rules">
            <div class="box-title"></div>
            <div class="box-content">
                <p>1、在8月13—8月16日期间，在本页参与合盘活动的用户，按照合盘分数高低将选出排行榜前三位小行星送出专属恋爱报告或婚姻报告奖励，排行榜4-10名的小行星将获得合盘报告奖励。</p>
                <p>2、参与本活动的用户，如邀请的好友已经填写档案并成功提交，可获得准了APP合盘报告8折券一张。</p>
                <p>3、合盘分数相同的情况下，会按照合盘时间先后顺序进行排名，如：用户A在8月13日5:20合盘出结果520分，用户B在8月13日5:40分合盘出结果520分，那么用户A的排名将排在用户B的前面，其他同理。</p>
                <p>4、当您参与本次合盘活动，代表您同意将您的合盘内容及分数授权给准了APP使用并公开给所有人。</p>
                <p>5、合盘分数必须在本页面参与活动进行合盘而产生，在APP中“合盘”功能产生的合盘分数不计入排名，请您悉知。</p>
            </div>
            <div class="box-important">
                <p>本活动中若发现有作弊刷分现象</p>
                <p>将一律取消活动获奖资格</p>
            </div>
            <div class="box-close"></div>
        </div>
    </div>
    <div class="fixed-button">
        <div class="rules-btn"></div>
    </div>
</div>
<div id="shadow" class="shadow"></div>
<div id="loading">
    <img src="{$oss}web/invitate_input_record/images/loading.gif" alt="">
</div>

<script>
    var status = '{$data.status}';
    var share_title = '{$share_title}';
    var share_introduction = '{$share_introduction}';
    var share_img = '{$share_img}';
    var signPackage = JSON.parse('{:json_encode($signPackage)}');
    var record = JSON.parse('{:json_encode($data.record)}');
    var is_user_have_record = '{$data.is_user_have_record}';
</script>

{if $data.status == 0}
<script src="{$oss}web/invitate_input_record/js/mui.min.js"></script>
<script src="{$oss}web/invitate_input_record/js/city.data-xzns.js"></script>
<script src="{$oss}web/invitate_input_record/js/mui.picker.min.js"></script>
<script src="{$oss}web/invitate_input_record/js/mui.poppicker.js"></script>
<script src="/static/invitate_input_record/js/time.place.js"></script>
{/if}
<script src="/static/jquery-3.1.1.min.js"></script>
{if $data.share_to ==1}
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    //微信分享 配置
    wx.config({
        debug: false,
        appId: signPackage.appId,
        timestamp: signPackage.timestamp,
        nonceStr: signPackage.nonceStr,
        signature: signPackage.signature,
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
    })
    ;
    //微信分享 配置
    wx.ready(function () {
        wx.onMenuShareAppMessage({
            title: share_title,
            desc: share_introduction,
            link: signPackage.url,
            imgUrl: share_img,
            type: 'link',
            dataUrl: '',
            success: function () {

            },
            cancel: function () {

            }
        });
        wx.onMenuShareTimeline({
            title: share_title,
            link: signPackage.url,
            imgUrl: share_img,
            success: function () {

            },
            cancel: function () {

            }
        });
    });
</script>
{/if}
<!--<script src="http://qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js"></script>-->
<script>
    let browser = {
        versions: function () {
            let u = navigator.userAgent, app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1,
                presto: u.indexOf('Presto') > -1,
                webKit: u.indexOf('AppleWebKit') > -1,
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
                mobile: !!u.match(/AppleWebKit.*Mobile.*/),
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                iPhone: u.indexOf('iPhone') > -1,
                iPad: u.indexOf('iPad') > -1,
                webApp: u.indexOf('Safari') == -1
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    };

    if (browser.versions.mobile) {
        let ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger" || ua.match(/QQ/i) == "qq") {
            console.log('在微信/qq中打开');
        } else {
            var container = $('.container');
            container.hide();
            $('body').append('请用微信/QQ打开链接');
        }
    } else {
        console.log('PC浏览器打开');
    }

    setResult();

    function setResult() {
        // alert('status='+status)
        const header_img = $('.header_img');
        const content_container = $('.content_container');
        const input_hint = $('.input_hint');
        const btn_ok = $('.btn_ok');
        const result_con = $('.result_container');
        const result_con_self = $('.result_con_self');

        if (0 == status) {
            header_img.show();
            content_container.show();
            input_hint.show();
            btn_ok.show();
        } else if (3 == status) {
            header_img.show();
            result_con_self.show();
        } else {
            header_img.show();
            result_con.show();
        }
        var common_bottom_con = $('.common_bottom_con');
        common_bottom_con.show();
    }

    //表单提交
    function checkForm() {
        let form = document.getElementById('form');
        let uid = form.uid.value;
        let avatar = form.avatar.value;
        let name = form.name.value;
        let sex = form.sex.value;
        let year = form.year.value;
        let birth_city = form.birth_city.value;
        if (!uid.trim()) {
            alert("登录信息异常!");
            return false;
        }
        if (!name.trim()) {
            alert("请填写昵称");
            return false;
        }
        if (!sex.trim()) {
            alert("请选择性别");
            return false;
        }
        if (!avatar.trim()) {
            // alert("请上传头像");
            // return false;
        }

        if (!year.trim()) {
            alert("请填写出生时间");
            return false;
        }
        if (!birth_city.trim()) {
            alert("请填写出生地点");
            return false;
        }

        document.getElementById('shadow').style.display = 'block';
        document.getElementById('loading').style.display = 'block';

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/web/valentine/saveRecord2021",
            data: $('#form').serialize(),
            success: function (result) {
                document.getElementById('shadow').style.display = 'none';
                document.getElementById('loading').style.display = 'none';
                if (result.code == 200) {
                    console.log(result);
                    let content_container = $('.content_container');
                    let input_hint = $('.input_hint');
                    let btn_ok = $('.btn_ok');
                    let result_con = $('.result_container');
                    content_container.hide();
                    input_hint.hide();
                    btn_ok.hide();
                    $('.result-tips').show();
                    $('#show-result').attr('href', "{:url('get_with_score2021')}?id=" + result.data.id + '&token=' + result.data.token)
                    result_con.show();
                } else {
                    alert(result.msg);
                }
            },
            error: function (result) {
                document.getElementById('shadow').style.display = 'none';
                document.getElementById('loading').style.display = 'none';
                alert(result.msg);
            }
        });
    }

    //选择性别事件
    function actionSex(sex) {
        let sex_male = $('#sex_male')[0];
        let sex_female = $('#sex_female')[0];
        let sex_element = $('#sex')[0];

        sex_element.value = sex;
        //先设置为未选中状态
        sex_male.className = 'sex';
        sex_female.className = 'sex sex_last';
        if (1 == sex) {
            sex_male.className += ' sex_selected';
        } else {
            sex_female.className += ' sex_selected';
        }
    }

    // 显示活动规则
    $('.rules-btn').click(function () {
        $('.pop-box').show();
    })

    // 活动规则关闭显示
    $('.pop-box .pop-shadow,.pop-box .box-close').click(function () {
        $('.pop-box').hide();
    })

    // $('.btn_index').click(function () {
    //     console.log('btn_index');
    //     window.location.href = '/web/valentine/index2021';
    // });

    $('.global-location .close').click(function () {
        $(this).parent().parent().hide();
        return false;
    })
</script>

{include file="../apps/web/view/public/sensors.html" /}
<script>
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=1279195343&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
</script>
</body>
</html>
